<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false" width="601px">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px">
            <el-form-item prop="name" :label="$t('food.categoryName')" required>
                <el-input v-model="dataForm.name" :placeholder="$t('input')"></el-input>
            </el-form-item>
            <el-form-item prop="parentName" :label="$t('food.categoryParentName')" class="dept-list">
            <el-popover :width="400" ref="categoryListPopover" placement="bottom-start" trigger="click"
              popper-class="popover-pop">
              <template v-slot:reference>
                <el-input v-model="dataForm.parentName" :readonly="true" :placeholder="$t('choose')">
                   </el-input></template>
              <div class="popover-pop-body"><el-tree :data="categoryList" :props="{ label: 'name', children: 'children' }"
                  node-key="id" ref="categoryListTree" :highlight-current="true" :expand-on-click-node="false" accordion
                  @current-change="deptListTreeCurrentChangeHandle"> </el-tree></div>
            </el-popover>
          </el-form-item>
            <el-form-item prop="sort" :label="$t('dishes.sort')">
                <el-input-number v-model="dataForm.sort" controls-position="right" :min="0"
                    :label="$t('input')"></el-input-number>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import baseService from '@/service/baseService';
import { useI18n } from "vue-i18n";
import { IObject } from '@/types/interface';

const { t } = useI18n();
const visible = ref(false);
const dataFormRef = ref();
const dataForm = reactive({
    id: "",
    name: "",
    pid: "",
    parentName: "",
    sort: 0,
})
const categoryList = ref([])

const rules = ref({
    name: [{ required: true, message: t("validate.required"), trigger: "blur" }],
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
    if (id) {
        getInfo(id)
    }
}

const getInfo = (id: number) => {
    baseService.get(`${id}`).then((res) => {
        Object.assign(dataForm, res.data)
    })
}

const categoryListPopover = ref()

// 上级部门树, 选中
const deptListTreeCurrentChangeHandle = (data: IObject) => {
  dataForm.pid = data.id;
  dataForm.parentName = data.name;
  categoryListPopover.value.hide();
};

// 表单提交
const dataFormSubmitHandle = () => { }

defineExpose({
    init
})
</script>